import React from 'react';
import { Button, Checkbox, Form, Input,Space,Divider,notification  } from 'antd';
import {
    UserOutlined,
    StarOutlined ,
    KeyOutlined ,
    QuestionCircleOutlined,
    SyncOutlined,
  } from '@ant-design/icons';
import './Register.scss'
import { useNavigate } from 'react-router-dom';
import { yewutable_register } from '../../api/yewutable';
interface Props{}
function Register(props:Props) {
    var navigate=useNavigate()
    let suiji:any=[]
suiji=[Math.floor(Math.random()*10),Math.floor(Math.random()*10),Math.floor(Math.random()*10),Math.floor(Math.random()*10)]

    const onFinish = (values: any) => {
        console.log('Success:', values);
        delete values.confirm
        delete values.agreement
        zhuce(values)
      };
      
      const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
      };

//== 注册
var zhuce=async (can:any)=>{
    var res=await yewutable_register(can)
    console.log(res.data)
    navigate('/login')
    notification.success({
        type:'success',
        message:'注册成功，请登录'
    })
}


//=手机号校验
var userValidator = (rule:any, value:string, callback:any)=>{
    if(  /^1[3-9]\d{9}$/.test( value ) ){
    callback();
    }else{
    callback(new Error('请输入正确的手机号!'))
    }
    }
//===验证码
var userYan= (rule:any, value:string, callback:any)=>{
    if( value==suiji.join('') ){
    callback();
    }else{
    callback(new Error('请输入正确的验证码!'))
    }
    }
    return (
        <div className='register'>
          <div className='center'>
            {/* <div className='left'>
                <div className='top'>
                    <img src="https://cdn7.axureshop.com/demo/1568099/images/%E9%A6%96%E9%A1%B5_1/u2731.png" alt="" />
                    <h2>政务服务网上办事大厅</h2>
                </div>
                <div className='bottom'>
                    <img src="https://cdn7.axureshop.com/demo/1568099/images/%E7%99%BB%E5%BD%95/u6537.png" alt="" />
                </div>
            </div> */}
            <div className='right'>
                <h2>用户注册</h2>
                <div style={{width:'80%'}}>
                <Space direction="vertical" size="large">
       <Form
    name="basic"
   
    wrapperCol={{ span: 24 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      name="username"
      rules={[{ required: true,validator: userValidator }]}
    >
      <Input placeholder='请输入手机号' prefix={<UserOutlined />} size="large" />
    </Form.Item>

    <Form.Item
      name="password"
      rules={[{ required: true, message: 'Please input your password!' }]}
    >
      <Input.Password placeholder='请输入密码' prefix={<KeyOutlined />} size="large" />
    </Form.Item>
    <Form.Item
        name="confirm"
      
        dependencies={['password']}
        hasFeedback
        rules={[
          {
            required: true,
            message: 'Please confirm your password!',
          },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('The two passwords that you entered do not match!'));
            },
          }),
        ]}
      >
        <Input.Password prefix={<KeyOutlined />} size="large" placeholder='请确认密码' />
      </Form.Item>
    
    <Form.Item wrapperCol={{ offset: 0, span: 24 }}>
      <Button block size="large" type="primary" htmlType="submit">
        登录
      </Button>
    </Form.Item>
    <Button type="link" onClick={()=>{navigate('/login')}}>已有账号？去登录</Button>
    <Form.Item
        name="agreement"
        valuePropName="checked"
        rules={[
          {
            validator: (_, value) =>
              value ? Promise.resolve() : Promise.reject(new Error('同意协议')),
          },
        ]}
      
      >
        <Checkbox>
        同意本平台的 <a>《用户协议》</a><a>《隐私政策》</a><a>《看准集团平台协议及隐私政策》</a>
        </Checkbox>
      </Form.Item>

  

   
  </Form> 


                </Space>
                
  
  

                </div>
      
                {/* <div style={{width:'80%'}}>
                <Space direction="vertical" size="large">
               <Input maxLength={11} onChange={(e)=>{phone(e.target.value)}} status=""  placeholder='请输入手机号' prefix={<UserOutlined />} size="large" />
            
             
               <Input.Password  placeholder='请输入密码'  prefix={<KeyOutlined />} size="large" />
             
             
               <div className='yanzheng'>
               <Input  placeholder='请输入验证码' prefix={<QuestionCircleOutlined />} size="large" />
               <div className='ma'>
                {
                    suiji.map((item:any,index:any)=>{
                        console.log(item)
                        return (
                            // rgb(100,${item*10},${item*10}})
               <span style={{transform: `scale(${item/10+1}) rotate(${item}deg)`,color:`rgb(${item*10},${item*20},${item*10})`,fontWeight:'bold'}}  key={index}>{item}</span>

                        )
                    })

                }
               </div>
               </div>
              
               <Button disabled={true} size='large' type="primary" block>
      登录
    </Button>
    <Button type="link">没有账号？去注册</Button>
    <Divider orientation="center" plain>
      版权所有，侵权必究
    </Divider>
               </Space>
                </div> */}
            </div>
          </div>
        </div>
    );
}

export default Register;